<html>
<head>
    <meta charset="UTF-8">
    <title>自动流程图查看</title>
    <link id="easyuiTheme"  href="../../static/easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css"/>
    <link href="../../static/css/normalize.css?twitterbutton" rel="stylesheet" type="text/css"/>
    <link href="../../static/css/tricks.css?twitterbutton" rel="stylesheet" type="text/css"/>
    <link href="../../static/css/elusive-webfont.css?twitterbutton" rel="stylesheet" type="text/css"/>
    <link href="../../static/css/codemirror.css?twitterbutton" rel="stylesheet" type="text/css"/>
    <link href="../../static/css/screen.css?twitterbutton" rel="stylesheet" type="text/css"/>
    <link href="../../static/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../../static/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/easyui/jquery.cookie.js" type="text/javascript"></script>
    <script src="../../static/easyui/ui-theme.js" type="text/javascript"></script>
    <script src="../../static/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/easyui/jquery.easyui.ext.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../static/plugin/assets/jslib.util.js" type="text/javascript"></script>
    <script src="../../static/plugin/assets/jslib.jquery.ajax.js" type="text/javascript"></script>
    <script src="../../static/plugin/assets/jslib.easyui.util.js" type="text/javascript"></script>
    <script src="../../static/js/libs/jquery.cookie.min.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/css/esaas-easyui-edit.css" rel="stylesheet" type="text/css" />
    <script src="../../static/js/konva.min.js" type="text/javascript"></script>
    <script src="../../static/js/uuid.v4.js" type="text/javascript"></script>
    <script src="../../static/js/flowchart.js" type="text/javascript"></script>
    <a href="" target="_blank" id="commonLink" name="commonLink"></a>
    <style>
        .tool-panel {
            text-align:left;
            background: #f8f8f8;
            border-bottom: solid 1px #d4d4d4;
        }
        .node-panel {
            margin: auto 5px;
            text-align: center;
        }
        .node-panel .node-drop {
            padding: 5px 15px;
            font-size: 16px;
            background-color: #f6f7ff;
            border: solid 2px #04679a;
            margin: 15px auto;
            width: 170px;
            height: 22px;
        }
    </style>
</head>
<body class="easyui-layout" scroll="no">
	<div data-options="region:'west',title:'流程编排面板'" style="width:283px;padding:1px;">
        <div class="node-panel"> </div>
	</div>
    <div data-options="region:'north',title:''" style="height: 28px; ">
        <div  class="esaas-info-title2" style="background-color: #205081;" >
            <div  style="padding: 2px; ">流程图查看</div>
            <a style="position:absolute;right: 5px;top: 1px;width:22px;height: 22px;background: url('../../static/easyui/themes/icons/cancel6.png')" class="easyui-menubutton" onclick="closeForm()" hr="#"></a>
        </div>
    </div>
	<div data-options="region:'center',title:''" >
        <div style="text-align:center;" id="centerPanel">
            <div class="tool-panel" style="width: 100%; height: 26px;">
            </div>
            <div id="container" ></div>
        </div>
	</div>
    <script>

		var bpmId = $.getUrlParam('bpmId');
		var externalData, flow, currentNode, bpmBase;
		
        $(function () {
            addTitle("流程图查看");
            var fixWindowHeight = function(){
                var h = $(window).height();
                var w = $(window).width();
                flow.container.stage.height(h - 38 -35);
                flow.container.stage.width(w- 283 - 30);
            };
			$(window).on('resize', fixWindowHeight);
			

            $.get(`../../api/bpm/base/infos/flowdata/${bpmId}`, null,
                function (data) {
                    externalData = data.rows;
                    $('title').text(externalData.BpmBaseInfo.bpmName);
                    $('#title').text(externalData.BpmBaseInfo.bpmName);
                    initFlowchart();
                    fixWindowHeight();
                }, "json");


        });

        function openTaskNode(event, node) {
            if (node && node.$data) {
                currentNode = node;
                if (currentNode.$data.bpmNodeId) {
                    $.restfulGet('../../api/plugin/define/' + currentNode.$data.bpmNodeCode,null,function(data){
                        if (data.rows && data.rows.pluginConfigUrl)
                            JLEUtil.createModalWin(`${node.$data.text}配置`, `PluginParamConfView.html?&nodeId=${node.$data.bpmNodeId}&bpmNodeCode=${node.$data.bpmNodeCode}&readonly=false`+'&bpmState='+$.getUrlParam("bpmState"));
                    });
                } else {
                    //currentNode.$data.nodeId = node.id();
                    currentNode.$data.bpmId = bpmId;
                    currentNode.$data.bpmNodeType =  currentNode.$data.type;
                    currentNode.$data.pluginId =  currentNode.$data.pluginId;
                    JLEUtil.createModalWin('选择业务插件',
                        `popPluginDefine.html?&nodeId=${node.$data.bpmNodeId}&readonly=false`);

                }
            }
        }


        // 初始化流程图
        function initFlowchart() {
            var panelNodes = [
                {
                    type: "N01",
                    text: "开始节点",
                    color: "#f6f7ff", // konva fill
                    borderColor: "#03689a", // konva stroke
                }, {
                    type: "N07",
                    text: "业务插件",
                    color: "#f6f7ff", // konva fill
                    borderColor: "#03689a", // konva stroke
                    onDblclick: openTaskNode,
                    contextmenu:[],
                }, {
                    type: "N99",
                    text: "结束节点",
                    color: "#f6f7ff", // konva fill
                    borderColor: "#03689a", // konva stroke
                }, ];
            // add nodepanel div
            panelNodes.forEach( (node, index)=>{
                var nodeDOM = $(`<div class="node-drop" draggable="false">${node.text}</div>`);
                $(nodeDOM).data('nodeData', node)
                $('.node-panel').append(nodeDOM);
            });
            var h = $(window).height();
            var w = $(window).width();
            h = h - 38 -35;
            w = w- 283 - 30;
            flow = new Flowchart({
                hidePanel: true,
                height : h,
                width : w,
                container: "container",
                /* onArrowDblclick: onArrowDblclick, */
                panel: {
                    nodes: panelNodes
                }
            });
            if (!externalData) {
                return;
            }
            var nodeInfos = externalData.BpmNodeInfo || [];
            var linkeds = externalData.BpmLinkedInfo || [];
            var nodes = [],
                links = [];
			nodeInfos.forEach((element, index) => {
                var node = flow.factory("Node", {
                    x: element.x,
                    y: element.y,
                    id: element.bpmNodeId,
                    type: element.bpmNodeType,
                    text: element.bpmNodeName,
                    bpmNodeId : element.bpmNodeId,
					bpmNodeCode : element.bpmNodeCode,
					bpmNodeName : element.bpmNodeName,
					bpmNodeType : element.bpmNodeType,
					bpmId : element.bpmId
                });
                nodes.push(node);
            });
            linkeds.forEach(element => {
                var link = flow.factory("Link", {
                    id: element.linkedId,
                    points: [element.x1, element.y1, element.x2, element.y2],
                    startNode: element.sourceNodeId,
                    endNode: element.targetNodeId,
                    linkedId : element.linkedId,
					linkedType : element.linkedType,
					sourceNodeId : element.sourceNodeId,
					targetNodeId : element.targetNodeId,
					linkedDesc : element.linkedDesc,
					x1 : element.x1,
					y1 : element.y1,
					x2 : element.x2,
					y2 : element.y2
                });
                links.push(link);
            });
            flow.load({
                nodes: nodes,
                links: links
            });
        }
        //关闭
        function closeForm() {
            $.messager.confirm('确认','您确认想要关闭页面吗？',function(r){
                if (r){
                    window.parent.close();
                }
            });
        }

	</script>
</body>
</html>
